import {Editor} from "@monaco-editor/react"
import {useModel} from "@umijs/max"
import {useEffect, useState} from "react"

const CustomEditor: React.FC<any> = ({
                                       value,
                                       onChange
                                     }: any) => {
  const {initialState} = useModel('@@initialState')
  const [code, setCode] = useState('')

  useEffect(() => {
    if (typeof value !== 'string') {
      setCode(JSON.stringify(value))
    } else {
      setCode(value)
    }
  }, [value])

  return <Editor
    height={400}
    language="json"
    value={code}
    onChange={(val) => {
      onChange?.(val as any)
    }}
    className={initialState?.settings?.navTheme === 'realDark' ? undefined : 'json_editor'}
    theme={initialState?.settings?.navTheme === 'realDark' ? "vs-dark" : 'light'}
  />
}

export default CustomEditor
